<template>
  <div class="container">
    <div class="list">
      <list-table-new v-bind="tableSetting" ref="tableParam"></list-table-new>
    </div>
    <dialogPublic
      width="900px"
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <editForm
        class="form"
        :formConfig="basicConfig"
        ref="basicForm"
        :formData="basicFormData"
      ></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import {
  addInfo,
  deleteInfo,
  updateInfo,
  queryList,
  designInfo,
} from "@/api/businessConfigurationManagement/printTemplateConfiguration.js";
export default {
  data() {
    return {
      title: "", // 弹框标题
      show: false, // 弹框显示
      // 弹框信息表单
      tableSetting: {
        showFilterBtn: false,
        showCustomBtn: false,
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "text",
              label: "模板名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        // 操作按钮
        actionList: [
          {
            name: "新建",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("add"),
            content: "未授权的功能",
            method: () => {
              this.toAdd();
            },
          },
        ],
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        // 表头
        column: [
          {
            label: "工作票类型",
            prop: "businessCode",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("ticket_work_type");
              let val = row.businessCode;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "模板名称",
            prop: "name",
            sortable: true,
          },
          {
            label: "备注",
            prop: "remark",
            sortable: true,
          },
          {
            label: "是否默认",
            prop: "defaultFlag",
            sortable: true,
            width: "100px",
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("YesOrNoBoolean");
              let val = row.defaultFlag;
              let obj = types.find((i) => i.value == val.toString());
              return obj ? obj.label : val;
            },
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: true,
          },
          {
            label: "创建人",
            prop: "createByName",
            sortable: true,
          },
          {
            label: "操作",
            type: "button",
            scopeType: "textButton",
            width: "240px",
            buttonArr: [
              {
                text: "修改",
                icon: "icon-a-xiugaibianji",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  row.defaultFlag = row.defaultFlag == true ? "true" : "false";
                  this.basicFormData = row;
                  this.title = "修改";
                  this.show = true;
                },
              },
              {
                text: "设计",
                icon: "icon-sheji",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.design(row.id);
                },
              },
              {
                text: "删除",
                icon: "icon-shanchu",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.delete(row);
                },
              },
            ],
          },
        ],
      },
      basicConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "工作票类型",
            prop: "businessCode",
            type: "select",
            required: true,
            span: 24,
            selectOption: this.$store.getters["dirtData"]("ticket_work_type"),
            methods: (obj) => {
              this.$refs.basicForm.setFormItem("name", obj.label);
              this.$refs.basicForm.setFormItem("businessGroup", "work_tick");
            },
          },
          {
            label: "模板名称",
            prop: "name",
            type: "text",
            required: true,
            placeholder: "请输入",
            span: 24,
          },
          {
            label: "是否默认",
            prop: "defaultFlag",
            trigger: "change",
            type: "radio",
            radioOption: this.$store.getters["dirtData"]("YesOrNoBoolean"),
            required: true,
            span: 24,
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea",
            span: 24,
            rows: 8,
          },
        ],
      },
      // 弹框数据
      basicFormData: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 新增配置项
    toAdd() {
      this.basicFormData = { defaultFlag: "true" };
      this.title = "新建";
      this.show = true;
    },
    // 弹框表单提交-新增或修改
    async doSubmit() {
      let actionApi = (params) => {
        return this.title == "新建" ? addInfo(params) : updateInfo(params);
      };
      let data = await this.$refs.basicForm.getFormData();
      await actionApi(data).then((res) => {
        if (res.code == 200) {
          this.show = false;
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.getTableData();
        }
      });
    },
    // 设计
    async design(id) {
      let data = { templateId: id };
      await designInfo(data).then((res) => {
        if (res.code == 200) {
          res.data =
            res.data +
            `&token=${
              localStorage.getItem("GDH_WATER_TOKEN") ||
              process.env.VUE_APP_TOKEN
            }&dynamicDataSource=${localStorage.getItem(
              "currDs"
            )}&dynamicOrg=${localStorage.getItem(
              "currOrg"
            )}&dynamicLeader=${localStorage.getItem(
              "currLeader"
            )}&dynamicLeaderOrg=${localStorage.getItem("currLeaderOrg")}`;
          this.$utils.isInstallPrintSoftware(res.data);
        }
      });
    },
    // 删除配置项详情
    async delete(row) {
      this.$confirm("确定要删除这条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = { id: row.id };
        deleteInfo(data).then((res) => {
          if (res.code == 200) {
            // this.$message.success(res.description);
            this.$message.success("删除成功！");
            this.getTableData();
          }
        });
      });
    },
    // 查询表格数据
    async getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr) {
        queryData.orders = sortStr;
      }
      queryData.businessGroup = "work_tick";
      let { data } = await queryList(queryData);
      this.$set(this.tableSetting, "tableData", data.list || []);
      this.$set(this.tableSetting, "totalNumber", data.total || 0);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .action {
    margin: 10px 30px;
    text-align: right;
  }
  .el-button--primary {
    background-color: @kr-main-color;
    border-color: @kr-main-color;
  }
  .list {
    margin: 20px;
    height: 95%;
  }
  .form {
    width: 700px;
    margin: 0 auto;
    padding: 25px 0;
  }
}
</style>